import 'package:renaiEn/new_detail.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';
import 'package:renaiEn/global.dart';
import 'package:renaiEn/api.dart';
import 'dart:ui';

class NewsListPage extends StatefulWidget {
  NewsListPage({Key key}) : super(key: key);
  @override
  _NewsListPageState createState() => _NewsListPageState();
}

class _NewsListPageState extends State<NewsListPage> {
  List _list = [];
  int _page = 1;
  @override
  void initState() {
    getData();
    super.initState();
  }

  getData() async {
    setState(() => {_list = []});
    var res = await list(_page);
    setState(() => {_list = res});
  }

  List<Widget> renderList(data) {
    List<Widget> list = [];
    for (var i = 0; i < data.length; i++) {
      var item = data[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) =>
                    NewsDetailPage(id: item['id'], title: item['title'][1]),
              ),
            );
          },
          child: Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.all(10),
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Global.backgroundColor,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.08),
                    offset: Offset(0, 0),
                    blurRadius: 10,
                    spreadRadius: 1,
                  )
                ],
                borderRadius: BorderRadius.circular(7),
              ),
              child: Row(
                children: [
                  Container(
                    width: 70,
                    height: 70,
                    decoration: BoxDecoration(
                      color: Global.backgroundColor,
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: Column(
                      children: [
                        Container(
                          width: 70,
                          height: 35,
                          decoration: BoxDecoration(
                            color: Global.fontSecondColor.withOpacity(.07),
                          ),
                          child: Center(
                            child: Text(
                              '英 汉',
                              style: TextStyle(
                                color: Global.primaryColor,
                                fontWeight: FontWeight.w600,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                        Container(
                          width: 70,
                          height: 35,
                          decoration: BoxDecoration(
                            color: Global.primaryColor.withOpacity(.5),
                          ),
                          child: Center(
                            child: Text(
                              '原 文',
                              style: TextStyle(
                                color: Global.backgroundColor,
                                fontWeight: FontWeight.w600,
                                fontSize: 20,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(width: 10),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              item['title'][0],
                              style: TextStyle(
                                color: Global.fontSecondColor,
                                fontSize: 10,
                                fontWeight: FontWeight.w600,
                                // fontFamily: 'SarasaMonoSCItalic',
                              ),
                            ),
                            Text(
                              item['date'],
                              style: TextStyle(
                                color: Global.fontSecondColor,
                                fontSize: 10,
                                fontWeight: FontWeight.w600,
                                // fontFamily: 'SarasaMonoSCItalic',
                              ),
                            ),
                          ],
                        ),
                        SizedBox(height: 15),
                        Text(
                          item['title'][1],
                          style: TextStyle(
                            color: Global.fontColor,
                            fontSize: 15,
                            fontWeight: FontWeight.w600,
                            // fontFamily: 'SarasaMonoSCItalic',
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              )),
        ),
      );
    }

    list.add(SizedBox(height: 20));
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _list.length == 0
        ? Container(
            color: Global.backgroundColor,
            child: Center(
              child: CircularProgressIndicator(
                backgroundColor: Global.backgroundColor,
                valueColor: AlwaysStoppedAnimation<Color>(Global.primaryColor),
              ),
            ),
          )
        : Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Global.backgroundColor,
            ),
            child: Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: renderList(_list),
                    ),
                  ),
                ),
                Container(
                  padding: EdgeInsets.fromLTRB(5, 5, 5, 15),
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(
                        width: 1,
                        color: Global.primaryColor,
                      ),
                    ),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Offstage(
                        offstage: _page == 1,
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              _page--;
                              getData();
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.fromLTRB(10, 10, 30, 10),
                            child: Row(
                              children: [
                                Icon(
                                  Icons.arrow_back,
                                  color: Global.fontColor.withOpacity(.6),
                                  size: 24,
                                ),
                                Text(
                                  '上一页',
                                  style: TextStyle(
                                    color: Global.fontColor.withOpacity(.6),
                                    fontSize: 17,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      Offstage(
                        offstage: _page == 5,
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              _page++;
                              getData();
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.fromLTRB(30, 10, 10, 10),
                            child: Row(
                              children: [
                                Text(
                                  '下一页',
                                  style: TextStyle(
                                    color: Global.fontColor.withOpacity(.6),
                                    fontSize: 17,
                                    fontWeight: FontWeight.w700,
                                  ),
                                ),
                                Icon(
                                  Icons.arrow_forward,
                                  color: Global.fontColor.withOpacity(.6),
                                  size: 24,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
  }
}
